<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input @keyup.enter.native="handleFilter" style="width: 260px;" class="filter-item"
                      placeholder="请输入查询信息" v-model="query.keyword">
            </el-input>
            <el-button class="filter-item" v-waves type="primary" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button class="filter-item" @click="showEditDialog(0)" style="margin-left: 0" type="primary" icon="el-icon-edit"> 添加
            </el-button>
        </div>
        <template>
            <el-tree
                default-expand-all
                :props="{label: 'name',children: 'children',isLeaf: 'leaf'}"
                :hilight-current="true"
                :data="tableList.items">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span class="buttons">
                          <el-button type="text" size="mini" @click="append(data,'添加')">
                        添加
                        </el-button>
                            <el-button type="text" size="mini" @click="append(data,'修改')">
                            修改
                          </el-button>
                          <el-button type="text" size="mini" @click="handleDelete(data.id)">
                            删除
                          </el-button>
                        </span>
                </div>
            </el-tree>
        </template>
        <el-dialog :stateManager="stateManager"></el-dialog>
    </div>
</template>
<script>
  import _dialog from './_dialog.vue'
  import waves from '@/directive/waves' // Waves directive
  export default {
    name: 'admin',
    components: {
      'el-dialog': _dialog
    },
    directives: { waves },
    data: function () {
      return {
        stateManager: {
          refreshList: true,
          editDialogVisible: false,
          editModelId: null,
          parentId:null,
          listLoading: true,
          buttonLoading: false,
        },
        query: {
          keyword: '',
          page: 1
        },
        list: this.$listDataSource({
          url: '/api/cms/category'
        }),
        model: this.$modelDataSource({
          url: '/api/cms/category',
          dataKey: 'model',
          attributes: {
            id: '',
          }
        }),
        currentPage: 1,
      }
    },
    created () {
      this.$store.commit('app/setPageTitle', '栏目管理')
    },
    methods: {
      showEditDialog: function (id) {
        this.stateManager.editDialogVisible = true
        this.stateManager.editModelId = id
        this.stateManager.parentId = id
      },
      append (data, type) {
        let self = this
        this.stateManager.editDialogVisible = true
        switch (type) {
          case '添加':
            this.stateManager.parentId = data.id
            this.stateManager.editModelId = 0
            self.stateManager.refreshList = true
            break
          case '修改':
            this.stateManager.editModelId = data.id
            self.stateManager.refreshList = true
            break
        }
      },
      handleFilter () {
        this.query.page = 1
        this.stateManager.refreshList = true
      },
      // 翻页
      handleCurrentChange (val) {
        this.currentPage = val
        this.query.page = val
        this.stateManager.refreshList = true
      },
      handleDelete (id) {
        let self = this
        this.$confirm('是否删除此项？', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          title: '删除确认'
        }).then(() => {
          self.model.uuid = id
        self.model.destroy(function () {
          self.stateManager.refreshList = true
          self.$message.success( '删除成功')
        })
      }).catch((res) => {
          console.log(res.response)
        self.$message.info('删除失败')
      })
      },
    },
    computed: {
      tableList () {
        let self = this
        if (this.stateManager.refreshList) {
          this.stateManager.listLoading = true
          this.list.fetch(self.query, function () {
            self.stateManager.refreshList = false
            self.stateManager.listLoading = false
          })
        }
        return this.list
      }
    }
  }
</script>
<style lang="scss" scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8%;
    }

    .select {
        font-siz: 20px;
        color: #1e90ff;
    }

    .custom-tree-node {
        padding-right: 0;
    }
</style>
